<template>
  <div class="title-wrapper">
    <div class="arrows left">
      <span class="arrow dark right"></span>
      <span class="arrow light right"></span>
    </div>
    <div class="title">{{ title }}</div>
    <div class="arrows right">
      <span class="arrow light left"></span>
      <span class="arrow dark left"></span>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue';

const props = defineProps({
  title: {
    type: String,
    required: true,
  },
});

onMounted(() => {});
</script>

<style scoped lang="scss">
.title-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0 32px 0;
}
.title {
  font-size: 30px;
  font-weight: bold;
  color: #222;
  margin: 0 12px;
}
.arrows {
  display: flex;
  align-items: center;
  gap: 2px;
}
.arrow {
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  position: relative;
}
.arrow.dark {
  z-index: 2;
}
.arrow.light {
  z-index: 1;
}
.arrow.right {
  border-left: 10px solid; /* 颜色后面覆盖 */
  border-right: none;
}
.arrow.left {
  border-right: 10px solid;
  border-left: none;
}
.arrow.dark.right {
  border-left-color: $primary-color;
  margin-right: -6px;
}
.arrow.light.right {
  border-left-color: #9cc2f7;
}
.arrow.dark.left {
  border-right-color: $primary-color;
}
.arrow.light.left {
  border-right-color: #9cc2f7;
  margin-right: -6px;
}
</style>
